<script setup>
 import { ref,onMounted} from 'vue'
import {getDeptList,saveDept,deleteDept,getDeptById,updateDept} from '@/api/dept' // 假设新增部门的接口为 addDept
import { ElMessageBox,ElMessage } from 'element-plus'

  const deptList = ref([])

  //查询函数
  const search = async () => {
    const result = await getDeptList()
    if (result.code) {
      deptList.value = result.data
    }else {
      ElMessage.error(result.msg)
    }
  }
    // 钩子函数
  onMounted(() => {
    search()
  })

    //修改部门函数
  const updatedept = async (id) => {
    //打开对话框
    dialogFormVisible.value = true
    dialogTitle.value = '修改部门'
    const result = await getDeptById(id)
    form.value = result.data
    if(formRef.value){
      formRef.value.resetFields()
    }
    
  }
// 删除部门函数
  const deletedept = async (id) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {const result = await deleteDept(id)
      if (result.code) {
      ElMessage.success('删除部门成功')
      search()
    } else {
      ElMessage.error(result.msg || '删除部门失败')
    }
    })   
}
// 对话框状态
const dialogFormVisible = ref(false)
const formRef = ref(null)
//对话框标题
const dialogTitle = ref()

// 表单数据
const form = ref({
  name: ''
})

//打开表单
const openDialog = () => {
  dialogFormVisible.value = true
  dialogTitle.value = '新增部门'
  //表单验证重置
  if(formRef.value){
    formRef.value.resetFields()
  }
}

// 表单验证规则
const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度为2-10位', trigger: 'blur' }
  ]
})

// 保存部门
const handleConfirm = async () => {
  try {
    // 表单验证
    if (!form.value.name) {
      ElMessage.error('请输入部门名称')
      return
    }
    if (form.value.name.length < 2 || form.value.name.length > 10) {
      ElMessage.error('部门名称长度为2-10位')
      return
    }
    let result
    if(form.value.id){
      result = await updateDept(form.value)
    }else{
      result = await saveDept(form.value)
    }
    // 发送新增部门请求
    if (result.code) {
      ElMessage.success(`操作成功`)
      dialogFormVisible.value = false // 关闭对话框
      search() // 刷新部门列表
    } else {
      ElMessage.error(result.msg)
    }
  } catch (error) {
    ElMessage.error('请求失败，请稍后重试')
  }
}


// 重置表单
const resetForm = () => {
  form.value.name = ''
}
</script>

<template>
  <h1>部门管理</h1>
  <!-- 新增部门按钮 -->
  <div class="button"> <el-button type="primary" @click="openDialog">
    +新增部门
  </el-button></div>
  <!-- 表格数据 -->
  <el-table :data="deptList" border style="width: 100%">
    <el-table-column type="index" label="序号" width="90" align="center" />
    <el-table-column prop="name" label="部门名称" width="260" align="center" />
    <el-table-column prop="updateTime" label="最后修改时间" width="300" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="{row}">
        <el-button type="primary" size="small" @:click="updatedept(row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>
        <el-button type="danger" size="small" @:click="deletedept(row.id)"><el-icon><DeleteFilled /></el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" :title=dialogTitle width="500" @close="resetForm">
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入部门名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  div{
    margin: 10px 0;
  }
  .button{
    text-align: right;
  }
</style>
